import { MenuFoldOutlined, MenuUnfoldOutlined, UploadOutlined, UserOutlined, VideoCameraOutlined, } from '@ant-design/icons';
import { HashRouter, Route, Routes, Navigate } from 'react-router-dom'
import Login from './pages/Login'
import Nav from './pages/nav'
import React from 'react'
const Home = React.lazy(() => import("./pages/Home"));
const User = React.lazy(() => import("./pages/system/User"));
const Role = React.lazy(() => import("./pages/system/Role"));
const Profile = React.lazy(() => import("./pages/profile/Profile"));

const NotFount = React.lazy(() => import("./pages/NotFount"));
//菜单数据
export const items = [
  {
    key: '1',
    icon: <UserOutlined />,
    label: '系统主页',
  },
  {
    key: '2',
    icon: <VideoCameraOutlined />,
    label: '系统管理',
    children: [
      {
        key: '1-1',
        label: '用户管理',
      },
      {
        key: '1-2',
        label: '角色管理',
      }
    ]
  },
  {
    key: '3',
    icon: <UploadOutlined />,
    label: '系统监控',
  },
]

function App() {

  return (
    <React.Suspense fallback={<div>加载中...</div>}>
      <HashRouter>
        <Routes>
          <Route path='/' element={<Navigate to="/login" />} />
          <Route path='login' element={<Login />} />
          <Route path='*' element={<NotFount />} />
          <Route path='nav' element={<Nav />}>
            <Route path='home' element={<Home />} />
            <Route path='profile' element={<Profile />} />
          </Route>
          <Route path='system' element={<Nav />}>
            <Route path='user' element={<User />} />
            <Route path='role' element={<Role />} />
          </Route>
        </Routes>
      </HashRouter>
    </React.Suspense>
  )
}

export default App
